<template>
  <div class="chart-line-container">
    <div class="risk-container">
      <a-radio-group value="a">
        <a-radio-button value="a">
          年龄
        </a-radio-button>
        <a-radio-button value="b">
          性别
        </a-radio-button>
        <a-radio-button value="d">
          收入段
        </a-radio-button>
        <a-radio-button value="e">
          新老客户
        </a-radio-button>
      </a-radio-group>

      <a-range-picker />
    </div>

    <div id="line" class="chart" />
  </div>
</template>

<script>
import { Line } from '@antv/g2plot'

export default {
  mounted () {
    this.$nextTick(() => {
      fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
        .then((res) => res.json())
        .then((data) => {
          const line = new Line('line', {
            data,
            xField: 'year',
            yField: 'value',
            seriesField: 'category',
            xAxis: {
              type: 'time',
            },
            yAxis: {
              label: {
                // 数值格式化为千分位
                formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
              },
            },
          })

          line.render()
        })
    })
  },
}
</script>

<style lang="scss" scoped>
.risk-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: $margin-sm;
}
</style>
